<template>
  <div 
    :class="[
      'fixed top-0 left-0 flex h-screen w-72 flex-col border-r p-6 shadow-sm',
      theme === 'dark' 
        ? 'bg-gray-800 border-gray-700' 
        : 'bg-white border-[var(--border-color)]'
    ]"
  >
    <div class="flex items-center gap-3 mb-8">
      <svg class="h-8 w-8 text-[var(--primary-color)]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.355a15.097 15.097 0 01-4.5 0m4.5 0V21m0-2.252a12.06 12.06 0 003.75 0m0 0V21m0-2.252c0-2.841-1.12-5.464-2.951-7.401S12.283 3 9.75 3M5.25 7.525c1.28.92 2.934 1.5 4.5 1.5s3.22-.58 4.5-1.5m0 0V3M5.25 3v4.525M3 12.75l3 1.75m15-1.75l-3 1.75M3 16.5l3 1.75m15-1.75l-3 1.75M9.75 21a3.75 3.75 0 110-7.5 3.75 3.75 0 010 7.5zm0-11.25a3.75 3.75 0 110-7.5 3.75 3.75 0 010 7.5z" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <h1 
        :class="[
          'text-xl font-semibold',
          theme === 'dark' ? 'text-white' : 'text-[var(--text-primary)]'
        ]"
      >
        数据洞察
      </h1>
    </div>
    
    <nav class="flex flex-col gap-2">
      <a 
        @click="router.push('/dashboard')" 
        :class="[
          'flex items-center gap-3 rounded-lg px-4 py-3 transition-colors cursor-pointer',
          currentRoute === '/dashboard' 
            ? (theme === 'dark' ? 'bg-gray-700 text-white' : 'bg-[var(--secondary-color)] text-[var(--primary-color)]')
            : (theme === 'dark' ? 'text-gray-400 hover:bg-gray-700 hover:text-white' : 'text-[var(--text-secondary)] hover:bg-slate-100 hover:text-[var(--text-primary)]')
        ]"
      >
        <span class="material-icons">dashboard</span>
        <span class="text-sm font-medium">仪表盘</span>
      </a>
      
      <a 
        @click="router.push('/chat')" 
        :class="[
          'flex items-center gap-3 rounded-lg px-4 py-3 transition-colors cursor-pointer',
          currentRoute === '/chat' 
            ? (theme === 'dark' ? 'bg-gray-700 text-white' : 'bg-[var(--secondary-color)] text-[var(--primary-color)]')
            : (theme === 'dark' ? 'text-gray-400 hover:bg-gray-700 hover:text-white' : 'text-[var(--text-secondary)] hover:bg-slate-100 hover:text-[var(--text-primary)]')
        ]"
      >
        <span class="material-icons">smart_toy</span>
        <span class="text-sm font-medium">智能助手</span>
      </a>

      <a
          @click="router.push('/screen')"
          :class="[
          'flex items-center gap-3 rounded-lg px-4 py-3 transition-colors cursor-pointer',
          currentRoute === '/screen'
            ? (theme === 'dark' ? 'bg-gray-700 text-white' : 'bg-[var(--secondary-color)] text-[var(--primary-color)]')
            : (theme === 'dark' ? 'text-gray-400 hover:bg-gray-700 hover:text-white' : 'text-[var(--text-secondary)] hover:bg-slate-100 hover:text-[var(--text-primary)]')
        ]"
      >
        <span class="material-icons">bar_chart</span>
        <span class="text-sm font-medium">数据大屏</span>
      </a>

      <a 
        @click="router.push('/reports')" 
        :class="[
          'flex items-center gap-3 rounded-lg px-4 py-3 transition-colors cursor-pointer',
          currentRoute === '/reports' 
            ? (theme === 'dark' ? 'bg-gray-700 text-white' : 'bg-[var(--secondary-color)] text-[var(--primary-color)]')
            : (theme === 'dark' ? 'text-gray-400 hover:bg-gray-700 hover:text-white' : 'text-[var(--text-secondary)] hover:bg-slate-100 hover:text-[var(--text-primary)]')
        ]"
      >
        <span class="material-icons">description</span>
        <span class="text-sm font-medium">报表生成</span>
      </a>
      
      <a 
        @click="router.push('/agents')" 
        :class="[
          'flex items-center gap-3 rounded-lg px-4 py-3 transition-colors cursor-pointer',
          currentRoute === '/agents' 
            ? (theme === 'dark' ? 'bg-gray-700 text-white' : 'bg-[var(--secondary-color)] text-[var(--primary-color)]')
            : (theme === 'dark' ? 'text-gray-400 hover:bg-gray-700 hover:text-white' : 'text-[var(--text-secondary)] hover:bg-slate-100 hover:text-[var(--text-primary)]')
        ]"
      >
        <span class="material-icons">people</span>
        <span class="text-sm font-medium">智能体管理</span>
      </a>
      
      <a 
        @click="router.push('/account-settings')" 
        :class="[
          'flex items-center gap-3 rounded-lg px-4 py-3 transition-colors cursor-pointer',
          currentRoute === '/account-settings' 
            ? (theme === 'dark' ? 'bg-gray-700 text-white' : 'bg-[var(--secondary-color)] text-[var(--primary-color)]')
            : (theme === 'dark' ? 'text-gray-400 hover:bg-gray-700 hover:text-white' : 'text-[var(--text-secondary)] hover:bg-slate-100 hover:text-[var(--text-primary)]')
        ]"
      >
        <span class="material-icons">settings</span>
        <span class="text-sm font-medium">账户设置</span>
      </a>
    </nav>
    
    <div 
      :class="[
        'mt-auto flex items-center gap-3 rounded-lg border p-3',
        theme === 'dark' ? 'border-gray-700' : 'border-[var(--border-color)]'
      ]"
    >
      <img alt="User Avatar" class="h-10 w-10 rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCOcd2PQneGnvjzSPZcFlioYtm5dSWX4GKtZCJSnkhKjIdOEyRZbgeyr6hCor0kAnAHO4C__XW7gn-7pp8Ih2HbVik8J_ZFXF6--GcSZBTr89sJc1UiCkayAZiQrRSFs2wtRxGRPpi104ZBnewuaRpmx_-15O9Z99gn6xZ-mtJhXkWsUDPEDOomj66SFFtqCNNWe1vHQVu4Ed0JnEU71vRWc9Fy0cCE19aLTp9gJkM_pDZE7RRFygaG2S1y8CWf6UP4Dps0W0uIPvic"/>
      <div>
        <p
            :class="[
            'text-sm font-medium',
            theme === 'dark' ? 'text-white' : 'text-[var(--text-primary)]'
          ]"
        >
          Olivia Martin
        </p>
        <p
            :class="[
            'text-xs',
            theme === 'dark' ? 'text-gray-400' : 'text-[var(--text-secondary)]'
          ]"
        >
          olivia.martin@example.com
        </p>
      </div>
      <button
          @click="handleLogout"
          :class="[
          'ml-auto',
          theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
        ]"
      >
        <span class="material-icons text-xl">logout</span>
      </button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const props = defineProps({
  theme: {
    type: String,
    default: 'light', // 'light' or 'dark'
  },
});

const router = useRouter();
const route = useRoute();

const currentRoute = computed(() => route.path);

const handleLogout = () => {
  router.push('/');
};
</script>

<style scoped>
/* 确保CSS变量在组件中可用 */
:root {
  --primary-color: #4f46e5;
  --secondary-color: #f3f4f6;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
}
</style>
